<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/assets/css/layui.css" media="all">

</head>
<body style="padding:20px 100px 0 100px">

<form class="layui-form layui-form-pane" action="/permission/updatePermission" id="form">
    <input value="${vo.id}" name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" value="${vo.name}" lay-verify="name" autocomplete="off" placeholder="请输入权限名称" class="layui-input" id="name">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限编码</label>
        <div class="layui-input-block">
            <input type="text" value="${vo.percode}" name="percode" lay-verify="percode" autocomplete="off" placeholder="请输入权限编码" class="layui-input" id="percode">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限类型</label>
        <div class="layui-input-block">
            <select name="type" lay-filter="type" id="type">
                <option value="menu" <c:if test="${vo.type=='menu'}">selected=""</c:if>>菜单</option>
                <option value="button" <c:if test="${vo.type=='button'}">selected=""</c:if>>按钮</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="p-url" style="display: <c:if test="${vo.type=='button'}">none</c:if>">
        <label class="layui-form-label">链接地址</label>
        <div class="layui-input-block">
            <input type="text" name="url" value="${vo.url}" lay-verify="url" autocomplete="off" placeholder="请输入权限链接地址" class="layui-input" id="url">
        </div>
    </div>
    <div class="layui-form-item" id="p-available">
        <label class="layui-form-label">菜单状态</label>
        <div class="layui-input-block">
            <select name="available" lay-filter="available" lay-verify="available" id="available">
                <option value="1" <c:if test="${vo.availableVo=='启用'}">selected=""</c:if>>启用</option>
                <option value="0" <c:if test="${vo.availableVo=='停用'}">selected=""</c:if>>停用</option>
            </select>
        </div>
    </div>
    <%--<div class="layui-form-item" id="p-parentid" style="display: none">--%>
        <%--<label class="layui-form-label">上级菜单</label>--%>
        <%--<div class="layui-input-block">--%>
            <%--<select name="parentid" lay-filter="parentid" lay-filter="parentid" id="parentid">--%>
                <%--<option value="" selected="selected">请选择</option>--%>
                <%--<c:forEach items="${list}" var="menu">--%>
                    <%--<option value="${menu.id }">${menu.name}</option>--%>
                <%--</c:forEach>--%>
            <%--</select>--%>
        <%--</div>--%>
    <%--</div>--%>
    <div class="layui-form-item" id="p-parentids" style="display: <c:if test="${vo.type=='button'}">none</c:if>">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
            <input type="text" value="${vo.parentids}" name="parentids" lay-verify="parentids" autocomplete="off" placeholder="请输入菜单图标" class="layui-input" id="parentids">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script src="/assets/layui.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function() {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            laydate = layui.laydate;
        var $ = layui.jquery, laypage = layui.laypage, layer = parent.layer === undefined ? layui.layer: parent.layer;
        form.on('select(type)', function(data){
            var type = data.value; //得到被选中的值
            if(type=="menu"){
                $('#form')[0].reset();
                $('#type').val(type);
                $("#p-parentids").css("display","");
                //$("#p-parentid").css("display","");
                $("#p-jb").css("display","");
                $("#p-url").css("display","");
                //重置验证
                $("#parentids").attr("lay-verify","parentids");
                //$("#parentid").attr("lay-verify","parentid");
                $("#jb").attr("lay-verify","jb");
                $("#url").attr("lay-verify","url");
            }else{
                $('#form')[0].reset();
                $('#type').val(type);
                $("#p-parentids").css("display","none");
                $("#p-parentid").css("display","none");
                $("#p-jb").css("display","none");
                $("#p-url").css("display","none");
                //重置验证
                $("#parentids").attr("lay-verify","");
                $("#parentid").attr("lay-verify","");
                $("#jb").attr("lay-verify","");
                $("#url").attr("lay-verify","");
            }
        });
        form.on('select(jb)', function(data){
            var jb = data.value; //得到被选中的值
            if(jb=="0"){
                $('#parentid').val("");
                form.render('select'); //刷新select选择框渲染
                $("#p-parentid").css("display","none");
                $("#parentid").attr("lay-verify","");
                $("#url").attr("lay-verify","");
            }else{
                $("#url").attr("lay-verify","url");
                $("#p-parentid").css("display","");
                $("#parentid").attr("lay-verify","parentid");
            }
        });
        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
            name: function(value) {
                if(value.length < 1) {
                    return '权限名称是必填项';
                }
            },
            percode: function(value) {
                if(value.length < 1) {
                    return '权限代码是必填项';
                }
            },
            url: function(value) {
                if(value.length < 1) {
                    return '链接地址是必填项';
                }
            },
            jb: function(value) {
                if(value.length < 1) {
                    return '菜单级别是必填项';
                }
            },
            parentid: function(value) {
                if(value.length < 1) {
                    return '上级菜单是必填项';
                }
            },
            parentids: function(value) {
                if(value.length < 1) {
                    return '菜单图标是必填项';
                }
            },
        });

        //监听提交
        form.on('submit(demo1)', function(data) {
            var index = parent.layer.getFrameIndex(window.name);   //关闭弹出层
            parent.layer.close(index);
            layer.alert("保存成功!");
            return true;
        });
    });
</script>
</body>
</html>
